<template>
	<view class="content" v-if="load">
		<view class="column">
			<view class="relative border_bottom">
				<swiper class="swiper" @change="getIndex" :indicator-dots="indicator" :autoplay="autoplay" :interval="interval"
				 :duration="duration">
					<swiper-item v-for="(item,index) in homepageData.bannerVos" :key="index">
						<image :src="item.imageUrl" class="banner" mode="aspectFit" lazy-load @tap="goUrl(item.linkUrl)"></image>
					</swiper-item>
				</swiper>
				<view class="dto_view">
					<view v-for="i in homepageData.bannerVos.length" :key="i" :class="[i==index?'dto_':'dto']">
					</view>
				</view>
			</view>
			<view class="notice">
				<view>
					<image src="../../static/img/notice.png" class="notice_img"></image>
				</view>
				<swiper vertical="true" class="notice_right" interval="3000" autoplay>
					<swiper-item v-for="index in homepageData.notices.length/2" :key="index" style="padding-top: 10upx;box-sizing: border-box;">
						<view style="align-items: center;" v-if="index*2<homepageData.notices.length">
							<view style="color: #FE0036;font-size: 50upx;line-height: 0;">·</view>
							<view style="margin-left: 10upx;color: #333333;font-size: 24upx;font-weight: 600;">{{homepageData.notices[index*2]}}</view>
						</view>
						<view style="align-items: center;" v-if="index*2+1<homepageData.notices.length">
							<view style="color: #FE0036;font-size: 50upx;line-height: 0;">·</view>
							<view style="margin-left: 10upx;color: #333333;font-size: 24upx;font-weight: 600;">{{homepageData.notices[index*2+1]}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view style="position: relative;">
				<swiper style="width: 100%;overflow: hidden;padding: 20upx;box-sizing: border-box;height: 180upx;" @change="getDtoIndex">
					<swiper-item v-for="(item,index) in mainAd" :key="index" style="border-radius: 20upx;">
						<image :src="item.image" @tap="goUrl(item.url)" style="height: 100%;width: 100%;border-radius: 20upx;"></image>
					</swiper-item>
				</swiper>
				<view style="position: absolute;bottom: 30upx;left: 50%;transform: translateX(-50%);">
					<view :class="[i==dtoIndex?'dto-item-active':'dto-item']" v-for="i in mainAd.length"
					 :key="i"></view>
				</view>
			</view>
		</view>

		<!-- 类目专区+导航商品 -->
		<view style="background-color: #FFFFFF;margin:20upx 0;flex-direction: column;">
			<view style="flex-wrap: wrap;width: 100%;">
				<view style="width: 50%;border:0.5px solid #F2F6FC;height: 200upx;align-items: flex-end;padding: 20upx; box-sizing: border-box;"
				 v-for="(item,index) in homepageData.categoryVos" :key="index" @tap="goCategory(item.id)" v-if="index<moreFlag">
					<view style="flex-direction: column;height: 100%;flex: 1;padding-left: 10upx;box-sizing: border-box;">
						<view style="color: #333333;">{{item.name}}</view>
						<view style="margin-top: 10upx;color: #999999;font-size: 24upx;">{{item.subName}}</view>
					</view>
					<image style="width: 150upx;height: 150upx;" :src="item.imageUrl" mode="aspectFill" lazy-load></image>
				</view>
				<view style="width: 50%;border:0.5px solid #F2F6FC;height: 200upx; box-sizing: border-box;background-color: #F2F6FC;"
				 class="center" @tap="moreCategory" v-if="moreFlag==5&&homepageData.categoryVos.length>5">
					<view style="color: #888888;font-size: 30upx;font-weight: 800;align-items: center;padding: 5upx 10upx;">
						VIEW MORE
						<view class="sanjiao"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="hot_view">
			<view class="hot_eng">
				HOT SALE
			</view>
			<view style="align-items: center;">
				<view class="short_line"></view>
				<view class="hot_text">商品热销</view>
				<view class="short_line"></view>
			</view>
		</view>
		<view style="flex-direction: column;">
			<view v-for="(item,index) in homepageData.hotSale.productDtos" :key="index" class="hot_pro" @tap="goProductDetail(item.id)">
				<image :src="item.image" class="hot_pro_img"></image>
				<view class="hot_pro_param">
					<view class="text_two pro_name">{{item.name}}</view>
					<view class="hot_sale_num">已有{{item.saleNum}}人购买</view>
					<!-- <view style="margin-top: 10upx;">
						<view class="center pro_name_1">
							<view style="align-items: flex-end;">
								<view style="font-size: 24upx;">￥</view>
								<view style="font-size: 30upx;font-weight: 800;">{{item.price}}</view>
							</view>
						</view>
						<view class="center hot_buy">购买</view>
					</view> -->
					<view style="margin-top: 10upx;align-items: flex-end;color: #FE0036;font-size: 24upx;">
						￥
						<view style="font-size: 32upx;font-weight: 700;">{{item.price}}</view>
					</view>

				</view>
			</view>
		</view>
		<view class="hot_view mar_top">
			<view class="hot_eng">
				SHOPKEEPER
			</view>
			<view style="align-items: center;">
				<view class="short_line"></view>
				<view class="hot_text">店铺推荐</view>
				<view class="short_line"></view>
			</view>
		</view>
		<view class="relative">
			<swiper class="re_pro_view" @change="getIndex2">
				<swiper-item v-for="(item,index) in homepageData.shopRecommend.productDtos" :key="index" class="re_pro_item center"
				 @tap="goProductDetail(item.id)">
					<image :src="item.image" class="re_pro_img"></image>
					<view class="text_one re_pro_name"> {{item.name}}</view>
					<view style="margin-top: 10upx;align-items: flex-end;color: #FE0036;font-size: 24upx;">
						￥
						<view style="font-size: 32upx;font-weight: 700;">{{item.price}}</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper_left">
				<uni-icon type="arrowleft" size="20" :color="index2==0?ins_active:active"></uni-icon>
			</view>
			<view class="swiper_right">
				<uni-icon type="arrowright" size="20" :color="index2==homepageData.shopRecommend.productDtos.length-1?ins_active:active"></uni-icon>
			</view>
		</view>
		<view class="hot_view mar_top">
			<view class="hot_eng">
				ACCESSORY ZONE
			</view>
			<view style="align-items: center;">
				<view class="short_line"></view>
				<view class="hot_text">配件专区</view>
				<view class="short_line"></view>
			</view>
		</view>
		<view class="parts_new_view">
			<view>
				<image v-if="homepageData.parts.productDtos[0]!=null" :src="homepageData.parts.productDtos[0].image" class="img_345"
				 mode="aspectFill" lazy-load @tap="goProductDetail(homepageData.parts.productDtos[0].id)"></image>
				<view class="parts_new_primary">
					<view v-if="homepageData.parts.productDtos[1]!=null" class="parts_new_primary_first" @tap="goProductDetail(homepageData.parts.productDtos[1].id)">
						<image :src="homepageData.parts.productDtos[1].image" class="img_162"></image>
						<view class="parts_new_right">
							<view class="text_two" style="color: #333333;font-size: 24upx;">{{homepageData.parts.productDtos[1].name}}</view>
							<view class="parts_new_price">￥ {{homepageData.parts.productDtos[1].price}}</view>
						</view>
					</view>
					<view v-if="homepageData.parts.productDtos[2]!=null" class="parts_new_primary_second" @tap="goProductDetail(homepageData.parts.productDtos[2].id)">
						<image :src="homepageData.parts.productDtos[2].image" class="img_162" mode="aspectFill" lazy-load></image>
						<view class="parts_new_right">
							<view class="text_two" style="color: #333333;font-size: 24upx;">{{homepageData.parts.productDtos[2].name}}</view>
							<view class="parts_new_price">￥ {{homepageData.parts.productDtos[2].price}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="flex-wrap: wrap;">
				<view v-if="index>=3" v-for="(item,index) in homepageData.parts.productDtos" :key="index" :class="[index%2==1?'parts_product_left':'.parts_product_right']"
				 @tap="goProductDetail(item.id)">
					<image :src="item.image" class="img_162" mode="aspectFill" lazy-load></image>
					<view class="parts_new_right">
						<view class="text_two" style="color: #333333;font-size: 24upx;">{{item.name}}</view>
						<view class="parts_new_price">￥ {{item.price}}</view>
					</view>
				</view>
			</view>

		</view>

		<view class="hot_view mar_top">
			<view class="hot_eng">
				NEW ARRIVAL
			</view>
			<view style="align-items: center;">
				<view class="short_line"></view>
				<view class="hot_text">新品上市</view>
				<view class="short_line"></view>
			</view>
		</view>
		<view class="parts_product_view">
			<view class="parts_item" v-for="(item,index) in homepageData.newProducts.productDtos" :key="index" @tap="goProductDetail(item.id)">
				<image :src="item.image" class="parts_pro_img" mode="aspectFill" lazy-load></image>
				<view class="text_two parts_pro_name">{{item.name}}</view>
				<view class="parts_pro_price_view">
					<view style="align-items: flex-end;">
						<view style="font-size: 24upx;color: #FE0036;">¥</view>
						<view style="font-size: 32upx;font-weight: 800;color: #FE0036;">{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="index_buttom">
			<view style="flex: 1;height: 300upx;flex-direction: column;" class="center">
				<view style="border: 3upx solid #FFFFFF;height: 150upx;width: 150upx;border-radius: 150upx;" class="center">
					<image src="../../static/img/zping.png" style="width: 80upx;height: 80upx;"></image>
				</view>
				<view style="color: #FFFFFF;margin-top: 15upx;">正品保障</view>
			</view>

			<view style="flex: 1;height: 300upx;flex-direction: column;" class="center">
				<view style="border: 3upx solid #FFFFFF;height: 150upx;width: 150upx;border-radius: 150upx;" class="center">
					<image src="../../static/img/wuyou.png" style="width: 80upx;height: 80upx;"></image>
				</view>
				<view style="color: #FFFFFF;margin-top: 15upx;">无忧售后</view>
			</view>

			<view style="flex: 1;height: 300upx;flex-direction: column;" class="center">
				<view style="border: 3upx solid #FFFFFF;height: 150upx;width: 150upx;border-radius: 150upx;" class="center">
					<image src="../../static/img/qu.png" style="width: 80upx;height: 80upx;"></image>
				</view>
				<view style="color: #FFFFFF;margin-top: 15upx;">快速发货</view>
			</view>

		</view>
	</view>
</template>

<script>
	import api from '../../common/api.js';
	import uniIcon from '../../components/uni-icon.vue';
	import {
		get_,
		getWithParam_
	} from '../../common/request.js';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				dtoIndex:0,
				load: false,
				moreFlag: 5,
				index2: 0,
				active: "#ff0000",
				ins_active: "#555555",
				index: 0,
				indicator: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				homepageData: {},
				mainAd: [],

			}
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			this.load = false
			this.getData()
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getDtoIndex(e){
				this.dtoIndex = e.detail.current
			},
			moreCategory() {
				this.moreFlag = this.homepageData.categoryVos.length
			},
			getIndex2(e) {
				this.index2 = e.detail.current
			},
			getIndex(e) {
				this.index = e.detail.current
			},
			goUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			goCategory(id) {
				uni.navigateTo({
					url: "../category/index?categoryId=" + id
				})
			},
			/**跳转到商品详情
			 * @param {Object} id
			 */
			goProductDetail(id) {
				console.log(id)
				uni.navigateTo({
					url: "../product/detail?id=" + id
				})
			},
			/**
			 * 获取初始数据
			 */
			getData() {
				get_(api.HOME_PAGE)
					.then(res => {
						this.homepageData = res.data
						this.mainAd = this.getMainAd(res.data.adManagerVos);
						uni.stopPullDownRefresh();
						this.load = true
					})
			},
			getMainAd(data) {
				for (var i = 0; i < data.length; i++) {
					if (data[i].position == 1) {
						return data[i].ads
					}
				}
				return null;
			}

		}
	}
</script>

<style>
	.dto-item {
		width: 10upx;
		height: 10upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: 0 5upx;
	}
	
	.dto-item-active {
		width: 20upx;
		height: 10upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: 0 5upx;
	}

	.sanjiao {
		margin-left: 15upx;
		width: 0;
		height: 0;
		border: 15upx solid;
		border-color: transparent transparent transparent #888888;
	}

	.parts_product_left {
		width: 345upx;
		height: 162.5upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
	}

	.parts_product_right {
		width: 345upx;
		height: 162.5upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
		margin-left: 20upx;
	}

	.parts_new_primary_second {
		width: 345upx;
		height: 162.5upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
	}

	.parts_new_price {
		color: #FE0036;
		font-size: 30upx;
		font-weight: 700;
	}

	.img_162 {
		height: 162.5upx;
		width: 162.5upx;
	}

	.parts_new_primary_first {
		width: 345upx;
		height: 162.5upx;
		background-color: #FFFFFF;
	}

	.parts_new_primary {
		margin-left: 20upx;
		flex-direction: column;
	}

	.img_345 {
		width: 345upx;
		height: 345upx;
	}

	.parts_new_right {
		width: 182.5upx;
		flex-direction: column;
		justify-content: space-between;
		padding: 10upx 20upx;
		box-sizing: border-box;
	}

	.parts_new_view {
		flex-direction: column;
		padding: 20upx;
		box-sizing: border-box;
	}

	.index_buttom {
		background-image: linear-gradient(to right, #333333, #555555);
		margin-top: 30upx;
	}

	.parts_buy {
		font-size: 24upx;
		border-radius: 10upx;
		padding: 5upx 10upx;
		color: #333333;
		border: 1px solid #333333;
	}

	.parts_pro_price_view {
		margin-top: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.parts_pro_name {
		margin-top: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
		color: #333333;
		font-weight: 600;
	}

	.parts_pro_img {
		width: 345upx;
		height: 345upx;
	}

	.parts_item {
		width: 345upx;
		margin-left: 20upx;
		margin-top: 20upx;
		background-color: #FFFFFF;
		flex-direction: column;
		padding-bottom: 20upx;
		border-radius: 20upx;
		overflow: hidden;
	}

	.parts_product_view {
		flex-wrap: wrap;
		padding-bottom: 20upx;
	}

	.parts_image {
		width: 100%;
	}

	.parts_view {
		flex-direction: column;
		margin-top: 20upx;
		background-color: #FFFFFF;
	}

	.swiper_right {
		position: absolute;
		right: 30upx;
		top: 50%;
		transform: translate(0, -50%);
	}

	.swiper_left {
		position: absolute;
		left: 30upx;
		top: 50%;
		transform: translate(0, -50%);
	}

	.re_pro_price {
		color: #FE0036;
		font-weight: 800;
		margin-top: 10upx;
	}

	.re_pro_name {
		margin-top: 20upx;
		width: 400upx;
		font-weight: 600;
	}

	.re_pro_view {
		width: 100%;
		height: 750upx;
	}

	.re_pro_img {
		width: 500upx;
		height: 500upx;
	}

	.re_pro_item {
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.mar_top {
		margin-top: 30upx;
	}

	.hot_sale_num {
		color: #555555;
		font-size: 24upx;
		margin-top: 40upx;
	}

	.hot_buy {
		color: #FFFFFF;
		background-color: #555555;
		font-weight: 800;
		height: 60upx;
		width: 120upx;
		font-size: 30upx;
	}

	.pro_name_1 {
		color: #FFFFFF;
		background-color: #FE0036;
		height: 60upx;
		width: 200upx;
	}

	.pro_name {
		color: #333333;
		font-weight: 600;
		margin-top: 15upx;
	}

	.hot_pro_param {
		flex-direction: column;
		flex: 1;
		margin-left: 20upx;
	}

	.hot_pro_img {
		width: 250upx;
		height: 250upx;
		border-radius: 10upx;
	}

	.hot_pro {
		padding: 20upx 50upx;
		box-sizing: border-box;
		margin-top: 10upx;
		background-color: #FFFFFF;
	}

	.hot_text {
		color: #FFFFFF;
		margin: 0upx 20upx;
	}

	.short_line {
		background-color: #FFFFFF;
		height: 2upx;
		width: 50upx;
	}

	.hot_eng {
		font-size: 35upx;
		font-weight: 700;
		color: #FFFFFF;
	}

	.hot_view {
		flex-direction: column;
		height: 120upx;
		width: 100%;
		align-items: center;
		justify-content: center;
		background-image: linear-gradient(to right, #333333, #555555)
	}

	.notice_right {
		height: 80upx;
		flex: 1;
		margin-left: 40upx;
	}

	.notice_img {
		width: 80upx;
		height: 80upx;
	}

	.notice {
		padding: 10upx 30upx;
		box-sizing: border-box;
		margin-top: 10upx;
	}

	.banner {
		width: 750upx;
		height: 290upx;
	}

	.swiper {
		width: 100%;
		height: 290upx;
	}

	.s_head {
		z-index: 88;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fe0338;
		width: 100%;
		height: 80upx;
		align-items: center;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.product_item {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		width: 340upx;
		flex-direction: column;
		margin-top: 10upx;
		padding-bottom: 20upx;
	}

	.product_item_right {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		width: 340upx;
		flex-direction: column;
		margin-left: 10upx;
		margin-top: 10upx;
		padding-bottom: 20upx;
	}

	.dto {
		width: 10upx;
		height: 10upx;
		border-radius: 10upx;
		background-color: rgba(0, 0, 0, 0.1);
		margin: 0 5upx;
	}

	.dto_ {
		width: 20upx;
		height: 10upx;
		border-radius: 10upx;
		background-color: rgba(0, 0, 0, 0.3);
		margin: 0 5upx;
	}

	.dto_view {
		position: absolute;
		bottom: 20upx;
		left: 50%;
		transform: translate(-50%, 0);
	}
</style>
